<div
  #popconfirm
  class="x-popconfirm"
  x-popover
  [title]="titleTpl"
  [content]="content"
  [footer]="footerTpl"
  [placement]="placement"
  [trigger]="trigger"
  [width]="width"
  [(visible)]="visible"
>
  <ng-content></ng-content>
</div>

<ng-template #titleTpl>
  <div class="x-popconfirm-title">
    <ng-container *xOutlet="title">
      <x-icon *ngIf="icon" [style.color]="iconColor" [type]="icon"></x-icon>
      <span>{{ title }}</span>
    </ng-container>
  </div>
</ng-template>

<ng-template #footerTpl>
  <div class="x-popconfirm-buttons">
    <x-button (click)="onCancel()">{{ getCancelText }}</x-button>
    <x-button type="primary" (click)="onConfirm()">{{ getConfirmText }}</x-button>
  </div>
</ng-template>
